<template>
  <div class="as-editor">
    <editor v-model="content" :init="initOptions" :disabled="disabled" id="mytextarea"></editor>
  </div>
</template>

<script>
  import tinymce from 'tinymce/tinymce'
  import Editor from '@tinymce/tinymce-vue'
  import 'tinymce/icons/default/icons';
  import 'tinymce/themes/silver/theme'
  import 'tinymce/plugins/colorpicker'
  import 'tinymce/plugins/contextmenu'
  import 'tinymce/plugins/textcolor'
  import 'tinymce/plugins/lists' // 列表插件
  import 'tinymce/plugins/code' // 源代码插件
  import 'tinymce/plugins/pagebreak' // 分页符插件
  import 'tinymce/plugins/charmap' // 特殊符号插件
  import 'tinymce/plugins/emoticons' // 表情插件
  import 'tinymce/plugins/save' // 保存插件
  import 'tinymce/plugins/preview' // 预览插件
  import 'tinymce/plugins/print' // 打印
  import 'tinymce/plugins/image' // 上传图片插件
  import 'tinymce/plugins/media' // 视频插件
  import 'tinymce/plugins/link' // 链接插件
  import 'tinymce/plugins/anchor' // 锚点插件
  import 'tinymce/plugins/codesample' // 代码插件
  import 'tinymce/plugins/table' // 表格插件
  import 'tinymce/plugins/searchreplace' // 查找、替换插件
  import 'tinymce/plugins/hr' // 水平分割线插件
  import 'tinymce/plugins/insertdatetime' // 时间日期插件
  import 'tinymce/plugins/paste' // 粘体插件
  import 'tinymce/plugins/wordcount' // 字数统计插件
  import 'tinymce/plugins/fullscreen' // 全屏插件
  import 'tinymce/plugins/help' // 帮助插件
  import 'tinymce/skins/ui/oxide/skin.min.css';

  export default {
    name: 'AsEditor',
    components: {Editor},
    props: {
      value: {type: String, default: ''},
      disabled: {type: Boolean, default: false},
      height: {type: [Number, String], default: '200px'},
      placeholder: {type: String, default: ''},
      // 定义字体大小列表的项目，每一项用空格分隔。数值单位与CSS写法相同。
      fontSize: {
        type: String,
        default: '12px 14px 16px 18px 20px 22px 24px 26px 28px 30px 32px 34px 36px 38px 40px 50px 60px 70px 80px 90px 100px 120px 140px 160px 180px 200px'
      },
      // 为行高下拉菜单指定对应的行高的值。
      lineHeight: {type: String, default: '1 1.1 1.2 1.3 1.4 1.5 2'},
      plugins: {
        type: [String, Array],
        default: 'lists code pagebreak charmap save preview print image media link anchor codesample table wordcount fullscreen help searchreplace hr insertdatetime'
      },
      toolbar: {
        type: [String, Array],
        default: () => {
          let obj = [
            'formatselect fontselect fontsizeselect',
            'undo redo',
            'code bold italic underline strikethrough',
            'alignleft aligncenter alignright alignjustify',
            'outdent indent numlist bullist insertdatetime',
            'table forecolor backcolor removeformat',
            'hr searchreplace pagebreak charmap',
            'fullscreen',
            'link anchor codesample'
          ];
          return obj.join(' | ')
        }
      }
    },
    data() {
      return {
        content: this.value,
      }
    },
    computed: {
      initOptions() {
        return {
          language_url: '/tinymce/langs/zh_CN.js',
          language: 'zh_CN',
          skin_url: '/tinymce/skins/ui/oxide',
          content_css: '/tinymce/skins/content/default/content.css',
          height: this.height,
          branding: false, // 是否禁用“Powered by TinyMCE”
          menubar: true, // 顶部菜单栏显示
          elementpath: false, // 设为false时，可隐藏底栏的元素路径
          font_formats: '微软雅黑=Microsoft YaHei,Helvetica Neue,PingFang SC,sans-serif;苹果苹方=PingFang SC,Microsoft YaHei,sans-serif;宋体=simsun,serif',
          placeholder: this.placeholder,
          lineheight_formats: this.lineHeight,
          fontsize_formats: this.fontSize,
          plugins: this.plugins,
          toolbar: this.toolbar,
          images_upload_handler: (blobInfo, success, failure) => {
            const img = 'data:image/jpeg;base64,' + blobInfo.base64();
            success(img);
          }
        }
      }
    },
    mounted() {
      tinymce.init({})
    },
    methods: {
      //添加相关的事件，可用的事件参照文档=> https://github.com/tinymce/tinymce-vue => All available events
      //需要什么事件可以自己增加
      onClick(e) {
        console.log(e);
        this.$emit('onClick', e, tinymce)
      }
    },
    watch: {
      value(newValue) {
        this.content = newValue
      },
      content(newValue) {
        this.$emit('input', newValue)
      }
    }
  }
</script>

<style lang="less">
  .as-editor {
    height: 100%;
    overflow: hidden;
  }
</style>
